<template>
  <div class="cron-generator">
    <div class="cron-header">
      <h1><i class="icon-clock"></i> Cron 表达式生成器</h1>
      <p>通过可视化界面配置定时任务计划</p>
    </div>

    <div class="cron-body">
      <div class="expression-display">
        <div class="expression-row">
          <div class="expression-label">CRON 表达式:</div>
          <div class="expression-value">{{ cronExpression }}</div>
        </div>
        <div class="expression-preview">
          <i class="icon-info"></i> 任务将在: {{ expressionPreview }}
        </div>
      </div>

      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          @click="activeTab = index"
          :class="['tab', {active: activeTab === index}]"
        >
          {{ tab.label }}
        </div>
      </div>

      <div class="tab-content">
        <!-- 分钟配置 -->
        <div v-if="activeTab === 0">
          <div class="control-group">
            <h3><i class="icon-cog"></i> 分钟配置</h3>
            <div class="options-grid">
              <div
                class="option-card"
                :class="{selected: minutes.type === 'every'}"
                @click="setMinutesType('every')"
              >
                <h4><i class="icon-asterisk"></i> 每分钟</h4>
                <p>每时每刻都执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: minutes.type === 'interval'}"
                @click="setMinutesType('interval')"
              >
                <h4><i class="icon-sync"></i> 间隔分钟</h4>
                <p>每隔指定分钟执行一次</p>
              </div>

              <div
                class="option-card"
                :class="{selected: minutes.type === 'specific'}"
                @click="setMinutesType('specific')"
              >
                <h4><i class="icon-list"></i> 特定分钟</h4>
                <p>选择特定的分钟执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: minutes.type === 'range'}"
                @click="setMinutesType('range')"
              >
                <h4><i class="icon-range"></i> 分钟范围</h4>
                <p>在指定分钟范围内执行</p>
              </div>
            </div>
          </div>

          <div v-if="minutes.type === 'interval'" class="control-group">
            <h3><i class="icon-sliders"></i> 间隔设置</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>每隔</span>
                <input
                  type="number"
                  min="1"
                  max="59"
                  v-model="minutes.interval"
                  @change="validateMinutesInterval"
                >
                <span>分钟</span>
              </div>
            </div>
          </div>

          <div v-if="minutes.type === 'specific'" class="control-group">
            <h3><i class="icon-check"></i> 选择分钟 (0-59)</h3>
            <div class="checkbox-grid">
              <div v-for="min in 12" :key="min" class="checkbox-item">
                <input
                  type="checkbox"
                  :id="'min'+min"
                  :value="(min-1)*5"
                  v-model="minutes.specific"
                >
                <label :for="'min'+min">{{ (min-1)*5 }}</label>
              </div>
            </div>
          </div>

          <div v-if="minutes.type === 'range'" class="control-group">
            <h3><i class="icon-range"></i> 设置分钟范围</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>从</span>
                <input
                  type="number"
                  min="0"
                  max="59"
                  v-model="minutes.rangeStart"
                  @change="validateMinutesRange"
                >
              </div>
              <div class="range-input">
                <span>到</span>
                <input
                  type="number"
                  min="0"
                  max="59"
                  v-model="minutes.rangeEnd"
                  @change="validateMinutesRange"
                >
              </div>
              <div class="range-input">
                <span>每隔</span>
                <input
                  type="number"
                  min="1"
                  max="59"
                  v-model="minutes.rangeStep"
                  @change="validateMinutesRange"
                >
                <span>分钟</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 小时配置 -->
        <div v-if="activeTab === 1">
          <div class="control-group">
            <h3><i class="icon-cog"></i> 小时配置</h3>
            <div class="options-grid">
              <div
                class="option-card"
                :class="{selected: hours.type === 'every'}"
                @click="setHoursType('every')"
              >
                <h4><i class="icon-asterisk"></i> 每小时</h4>
                <p>每小时都执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: hours.type === 'interval'}"
                @click="setHoursType('interval')"
              >
                <h4><i class="icon-sync"></i> 间隔小时</h4>
                <p>每隔指定小时执行一次</p>
              </div>

              <div
                class="option-card"
                :class="{selected: hours.type === 'specific'}"
                @click="setHoursType('specific')"
              >
                <h4><i class="icon-list"></i> 特定小时</h4>
                <p>选择特定的小时执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: hours.type === 'range'}"
                @click="setHoursType('range')"
              >
                <h4><i class="icon-range"></i> 小时范围</h4>
                <p>在指定小时范围内执行</p>
              </div>
            </div>
          </div>

          <div v-if="hours.type === 'interval'" class="control-group">
            <h3><i class="icon-sliders"></i> 间隔设置</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>每隔</span>
                <input
                  type="number"
                  min="1"
                  max="23"
                  v-model="hours.interval"
                  @change="validateHoursInterval"
                >
                <span>小时</span>
              </div>
            </div>
          </div>

          <div v-if="hours.type === 'specific'" class="control-group">
            <h3><i class="icon-check"></i> 选择小时 (0-23)</h3>
            <div class="checkbox-grid">
              <div v-for="hour in 24" :key="hour" class="checkbox-item">
                <input
                  type="checkbox"
                  :id="'hour'+hour"
                  :value="hour-1"
                  v-model="hours.specific"
                >
                <label :for="'hour'+hour">{{ hour-1 }}</label>
              </div>
            </div>
          </div>

          <div v-if="hours.type === 'range'" class="control-group">
            <h3><i class="icon-range"></i> 设置小时范围</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>从</span>
                <input
                  type="number"
                  min="0"
                  max="23"
                  v-model="hours.rangeStart"
                  @change="validateHoursRange"
                >
              </div>
              <div class="range-input">
                <span>到</span>
                <input
                  type="number"
                  min="0"
                  max="23"
                  v-model="hours.rangeEnd"
                  @change="validateHoursRange"
                >
              </div>
              <div class="range-input">
                <span>每隔</span>
                <input
                  type="number"
                  min="1"
                  max="23"
                  v-model="hours.rangeStep"
                  @change="validateHoursRange"
                >
                <span>小时</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 日期配置 -->
        <div v-if="activeTab === 2">
          <div class="control-group">
            <h3><i class="icon-calendar"></i> 日期配置</h3>
            <div class="options-grid">
              <div
                class="option-card"
                :class="{selected: days.type === 'every'}"
                @click="setDaysType('every')"
              >
                <h4><i class="icon-asterisk"></i> 每天</h4>
                <p>每天都执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: days.type === 'interval'}"
                @click="setDaysType('interval')"
              >
                <h4><i class="icon-sync"></i> 间隔天数</h4>
                <p>每隔指定天数执行一次</p>
              </div>

              <div
                class="option-card"
                :class="{selected: days.type === 'specific'}"
                @click="setDaysType('specific')"
              >
                <h4><i class="icon-list"></i> 特定日期</h4>
                <p>选择特定的日期执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: days.type === 'last'}"
                @click="setDaysType('last')"
              >
                <h4><i class="icon-calendar-minus"></i> 月末</h4>
                <p>在每月最后一天执行</p>
              </div>
            </div>
          </div>

          <div v-if="days.type === 'interval'" class="control-group">
            <h3><i class="icon-sliders"></i> 间隔设置</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>每隔</span>
                <input
                  type="number"
                  min="1"
                  max="30"
                  v-model="days.interval"
                  @change="validateDaysInterval"
                >
                <span>天</span>
              </div>
            </div>
          </div>

          <div v-if="days.type === 'specific'" class="control-group">
            <h3><i class="icon-check"></i> 选择日期 (1-31)</h3>
            <div class="checkbox-grid">
              <div v-for="day in 31" :key="day" class="checkbox-item">
                <input
                  type="checkbox"
                  :id="'day'+day"
                  :value="day"
                  v-model="days.specific"
                >
                <label :for="'day'+day">{{ day }}</label>
              </div>
            </div>
          </div>
        </div>

        <!-- 月份配置 -->
        <div v-if="activeTab === 3">
          <div class="control-group">
            <h3><i class="icon-calendar"></i> 月份配置</h3>
            <div class="options-grid">
              <div
                class="option-card"
                :class="{selected: months.type === 'every'}"
                @click="setMonthsType('every')"
              >
                <h4><i class="icon-asterisk"></i> 每月</h4>
                <p>每个月都执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: months.type === 'specific'}"
                @click="setMonthsType('specific')"
              >
                <h4><i class="icon-list"></i> 特定月份</h4>
                <p>选择特定的月份执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: months.type === 'range'}"
                @click="setMonthsType('range')"
              >
                <h4><i class="icon-range"></i> 月份范围</h4>
                <p>在指定月份范围内执行</p>
              </div>
            </div>
          </div>

          <div v-if="months.type === 'specific'" class="control-group">
            <h3><i class="icon-check"></i> 选择月份</h3>
            <div class="checkbox-grid">
              <div
                v-for="(month, index) in monthNames"
                :key="index"
                class="checkbox-item"
              >
                <input
                  type="checkbox"
                  :id="'month'+index"
                  :value="index+1"
                  v-model="months.specific"
                >
                <label :for="'month'+index">{{ month }}</label>
              </div>
            </div>
          </div>

          <div v-if="months.type === 'range'" class="control-group">
            <h3><i class="icon-range"></i> 设置月份范围</h3>
            <div class="range-controls">
              <div class="range-input">
                <span>从</span>
                <select v-model="months.rangeStart">
                  <option v-for="(month, index) in monthNames" :key="index" :value="index+1">
                    {{ month }}
                  </option>
                </select>
              </div>
              <div class="range-input">
                <span>到</span>
                <select v-model="months.rangeEnd">
                  <option v-for="(month, index) in monthNames" :key="index" :value="index+1">
                    {{ month }}
                  </option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- 星期配置 -->
        <div v-if="activeTab === 4">
          <div class="control-group">
            <h3><i class="icon-calendar"></i> 星期配置</h3>
            <div class="options-grid">
              <div
                class="option-card"
                :class="{selected: weeks.type === 'every'}"
                @click="setWeeksType('every')"
              >
                <h4><i class="icon-asterisk"></i> 每周</h4>
                <p>每周都执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: weeks.type === 'specific'}"
                @click="setWeeksType('specific')"
              >
                <h4><i class="icon-list"></i> 特定星期</h4>
                <p>选择特定的星期执行</p>
              </div>

              <div
                class="option-card"
                :class="{selected: weeks.type === 'last'}"
                @click="setWeeksType('last')"
              >
                <h4><i class="icon-calendar-minus"></i> 最后一周</h4>
                <p>在每月最后一周执行</p>
              </div>
            </div>
          </div>

          <div v-if="weeks.type === 'specific'" class="control-group">
            <h3><i class="icon-check"></i> 选择星期</h3>
            <div class="checkbox-grid">
              <div
                v-for="(day, index) in dayNames"
                :key="index"
                class="checkbox-item"
              >
                <input
                  type="checkbox"
                  :id="'week'+index"
                  :value="index === 0 ? 7 : index"
                  v-model="weeks.specific"
                >
                <label :for="'week'+index">{{ day }}</label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="actions">
        <button class="btn btn-primary" @click="copyToClipboard">
          <i class="icon-copy"></i> 复制表达式
        </button>
        <button class="btn btn-outline" @click="reset">
          <i class="icon-reset"></i> 重置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';

// 组件状态
const activeTab = ref(0);
const tabs = ref([
  { label: '分钟' },
  { label: '小时' },
  { label: '日期' },
  { label: '月份' },
  { label: '星期' }
]);

// 月份和星期的名称
const monthNames = [
  '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月'
];

const dayNames = [
  '周日', '周一', '周二', '周三', '周四', '周五', '周六'
];

// 分钟配置
const minutes = reactive({
  type: 'every',
  interval: 15,
  specific: [0, 15, 30, 45],
  rangeStart: 0,
  rangeEnd: 59,
  rangeStep: 15
});

// 小时配置
const hours = reactive({
  type: 'every',
  interval: 2,
  specific: [9, 12, 15, 18],
  rangeStart: 9,
  rangeEnd: 18,
  rangeStep: 3
});

// 日期配置
const days = reactive({
  type: 'every',
  interval: 1,
  specific: [1, 15],
  last: false
});

// 月份配置
const months = reactive({
  type: 'every',
  specific: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  rangeStart: 1,
  rangeEnd: 12
});

// 星期配置
const weeks = reactive({
  type: 'every',
  specific: [1, 2, 3, 4, 5],
  last: false
});

// 设置分钟类型
function setMinutesType(type) {
  minutes.type = type;
}

// 设置小时类型
function setHoursType(type) {
  hours.type = type;
}

// 设置日期类型
function setDaysType(type) {
  days.type = type;
}

// 设置月份类型
function setMonthsType(type) {
  months.type = type;
}

// 设置星期类型
function setWeeksType(type) {
  weeks.type = type;
}

// 验证分钟间隔
function validateMinutesInterval() {
  if (minutes.interval < 1) minutes.interval = 1;
  if (minutes.interval > 59) minutes.interval = 59;
}

// 验证分钟范围
function validateMinutesRange() {
  if (minutes.rangeStart < 0) minutes.rangeStart = 0;
  if (minutes.rangeStart > 59) minutes.rangeStart = 59;
  if (minutes.rangeEnd < 0) minutes.rangeEnd = 0;
  if (minutes.rangeEnd > 59) minutes.rangeEnd = 59;
  if (minutes.rangeStep < 1) minutes.rangeStep = 1;
  if (minutes.rangeStep > 59) minutes.rangeStep = 59;

  // 确保开始时间小于结束时间
  if (minutes.rangeStart > minutes.rangeEnd) {
    [minutes.rangeStart, minutes.rangeEnd] = [minutes.rangeEnd, minutes.rangeStart];
  }
}

// 验证小时间隔
function validateHoursInterval() {
  if (hours.interval < 1) hours.interval = 1;
  if (hours.interval > 23) hours.interval = 23;
}

// 验证小时范围
function validateHoursRange() {
  if (hours.rangeStart < 0) hours.rangeStart = 0;
  if (hours.rangeStart > 23) hours.rangeStart = 23;
  if (hours.rangeEnd < 0) hours.rangeEnd = 0;
  if (hours.rangeEnd > 23) hours.rangeEnd = 23;
  if (hours.rangeStep < 1) hours.rangeStep = 1;
  if (hours.rangeStep > 23) hours.rangeStep = 23;

  // 确保开始时间小于结束时间
  if (hours.rangeStart > hours.rangeEnd) {
    [hours.rangeStart, hours.rangeEnd] = [hours.rangeEnd, hours.rangeStart];
  }
}

// 验证天数间隔
function validateDaysInterval() {
  if (days.interval < 1) days.interval = 1;
  if (days.interval > 30) days.interval = 30;
}

// 生成分钟部分的cron表达式
const minuteExpression = computed(() => {
  switch (minutes.type) {
    case 'every':
      return '*';
    case 'interval':
      return `*/${minutes.interval}`;
    case 'specific':
      return minutes.specific.length > 0
        ? minutes.specific.join(',')
        : '*';
    case 'range':
      return `${minutes.rangeStart}-${minutes.rangeEnd}/${minutes.rangeStep}`;
    default:
      return '*';
  }
});

// 生成小时部分的cron表达式
const hourExpression = computed(() => {
  switch (hours.type) {
    case 'every':
      return '*';
    case 'interval':
      return `*/${hours.interval}`;
    case 'specific':
      return hours.specific.length > 0
        ? hours.specific.join(',')
        : '*';
    case 'range':
      return `${hours.rangeStart}-${hours.rangeEnd}/${hours.rangeStep}`;
    default:
      return '*';
  }
});

// 生成日期部分的cron表达式
const dayExpression = computed(() => {
  switch (days.type) {
    case 'every':
      return '*';
    case 'interval':
      return `*/${days.interval}`;
    case 'specific':
      return days.specific.length > 0
        ? days.specific.join(',')
        : '*';
    case 'last':
      return 'L';
    default:
      return '*';
  }
});

// 生成月份部分的cron表达式
const monthExpression = computed(() => {
  switch (months.type) {
    case 'every':
      return '*';
    case 'specific':
      return months.specific.length > 0
        ? months.specific.join(',')
        : '*';
    case 'range':
      return `${months.rangeStart}-${months.rangeEnd}`;
    default:
      return '*';
  }
});

// 生成星期部分的cron表达式
const weekExpression = computed(() => {
  switch (weeks.type) {
    case 'every':
      return '*';
    case 'specific':
      return weeks.specific.length > 0
        ? weeks.specific.join(',')
        : '*';
    case 'last':
      return 'L';
    default:
      return '*';
  }
});

// 完整的cron表达式
const cronExpression = computed(() => {
  return `${minuteExpression.value} ${hourExpression.value} ${dayExpression.value} ${monthExpression.value} ${weekExpression.value}`;
});

// 表达式预览文本
const expressionPreview = computed(() => {
  let preview = [];

  // 分钟部分
  if (minutes.type === 'every') {
    preview.push('每分钟');
  } else if (minutes.type === 'interval') {
    preview.push(`每${minutes.interval}分钟`);
  } else if (minutes.type === 'specific') {
    if (minutes.specific.length === 0) {
      preview.push('每分钟');
    } else {
      preview.push(`在${minutes.specific.join(',')}分钟`);
    }
  } else if (minutes.type === 'range') {
    preview.push(`在${minutes.rangeStart}到${minutes.rangeEnd}分钟之间，每${minutes.rangeStep}分钟`);
  }

  // 小时部分
  if (hours.type === 'every') {
    preview.push('每小时');
  } else if (hours.type === 'interval') {
    preview.push(`每${hours.interval}小时`);
  } else if (hours.type === 'specific') {
    if (hours.specific.length === 0) {
      preview.push('每小时');
    } else {
      preview.push(`在${hours.specific.join(',')}点`);
    }
  } else if (hours.type === 'range') {
    preview.push(`在${hours.rangeStart}点到${hours.rangeEnd}点之间，每${hours.rangeStep}小时`);
  }

  // 日期部分
  if (days.type === 'every') {
    preview.push('每天');
  } else if (days.type === 'interval') {
    preview.push(`每${days.interval}天`);
  } else if (days.type === 'specific') {
    if (days.specific.length === 0) {
      preview.push('每天');
    } else {
      preview.push(`在每月的${days.specific.join(',')}号`);
    }
  } else if (days.type === 'last') {
    preview.push('在每月最后一天');
  }

  // 月份部分
  if (months.type === 'every') {
    preview.push('每月');
  } else if (months.type === 'specific') {
    if (months.specific.length === 0) {
      preview.push('每月');
    } else {
      const selectedMonths = months.specific.map(m => monthNames[m - 1]);
      preview.push(`在${selectedMonths.join(',')}`);
    }
  } else if (months.type === 'range') {
    preview.push(`在${monthNames[months.rangeStart - 1]}到${monthNames[months.rangeEnd - 1]}之间`);
  }

  // 星期部分
  if (weeks.type === 'every') {
    preview.push('每周');
  } else if (weeks.type === 'specific') {
    if (weeks.specific.length === 0) {
      preview.push('每周');
    } else {
      const selectedDays = weeks.specific.map(d => {
        return d === 7 ? '周日' : dayNames[d];
      });
      preview.push(`在${selectedDays.join(',')}`);
    }
  } else if (weeks.type === 'last') {
    preview.push('在每月最后一周');
  }

  return preview.join('，');
});

// 复制到剪贴板
function copyToClipboard() {
  navigator.clipboard.writeText(cronExpression.value)
    .then(() => {
      alert('Cron表达式已复制到剪贴板！');
    })
    .catch(err => {
      console.error('复制失败:', err);
      alert('复制失败，请手动复制表达式');
    });
}

// 重置所有设置
function reset() {
  minutes.type = 'every';
  minutes.interval = 15;
  minutes.specific = [0, 15, 30, 45];
  minutes.rangeStart = 0;
  minutes.rangeEnd = 59;
  minutes.rangeStep = 15;

  hours.type = 'every';
  hours.interval = 2;
  hours.specific = [9, 12, 15, 18];
  hours.rangeStart = 9;
  hours.rangeEnd = 18;
  hours.rangeStep = 3;

  days.type = 'every';
  days.interval = 1;
  days.specific = [1, 15];

  months.type = 'every';
  months.specific = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  months.rangeStart = 1;
  months.rangeEnd = 12;

  weeks.type = 'every';
  weeks.specific = [1, 2, 3, 4, 5];

  activeTab.value = 0;
}
</script>

<style scoped>
.cron-generator {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: all 0.3s ease;
  max-width: 1000px;
  margin: 0 auto;
}

.cron-header {
  background: linear-gradient(to right, #3a7bd5, #00d2ff);
  color: white;
  padding: 25px 30px;
  text-align: center;
}

.cron-header h1 {
  font-size: 2rem;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cron-header p {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.cron-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.expression-display {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.expression-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.expression-label {
  font-weight: 600;
  color: #495057;
  min-width: 120px;
}

.expression-value {
  flex: 1;
  background: white;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 12px 15px;
  font-family: monospace;
  font-size: 1.1rem;
  color: #212529;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.expression-preview {
  background: #e8f4ff;
  padding: 15px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  border-left: 4px solid #3a7bd5;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 15px;
}

.tab {
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 600;
  color: #6c757d;
  transition: all 0.2s ease;
  background: #f1f3f5;
}

.tab.active {
  background: #3a7bd5;
  color: white;
}

.tab-content {
  padding: 25px 15px;
  min-height: 300px;
}

.control-group {
  margin-bottom: 25px;
}

.control-group h3 {
  font-size: 1.2rem;
  color: #3a7bd5;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #dee2e6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

.option-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 18px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border-color: #3a7bd5;
}

.option-card.selected {
  background: #e8f4ff;
  border-color: #3a7bd5;
}

.option-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-card p {
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.5;
}

.range-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  padding: 10px 0;
}

.range-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

.range-input input, .range-input select {
  width: 80px;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  text-align: center;
  font-size: 1rem;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-item input {
  width: 18px;
  height: 18px;
}

.checkbox-item label {
  font-size: 0.95rem;
  color: #495057;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.btn {
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(to right, #3a7bd5, #00d2ff);
  color: white;
}

.btn-outline {
  background: transparent;
  border: 2px solid #3a7bd5;
  color: #3a7bd5;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 图标样式 */
.icon-clock::before {
  content: "⏱️";
}

.icon-info::before {
  content: "ℹ️";
}

.icon-cog::before {
  content: "⚙️";
}

.icon-asterisk::before {
  content: "✱";
}

.icon-sync::before {
  content: "🔄";
}

.icon-list::before {
  content: "📋";
}

.icon-range::before {
  content: "↔️";
}

.icon-sliders::before {
  content: "🎚️";
}

.icon-check::before {
  content: "✅";
}

.icon-calendar::before {
  content: "📅";
}

.icon-calendar-minus::before {
  content: "📆";
}

.icon-copy::before {
  content: "📋";
}

.icon-reset::before {
  content: "🔄";
}

@media (max-width: 768px) {
  .cron-body {
    padding: 20px 15px;
  }

  .expression-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tabs {
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .range-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .options-grid {
    grid-template-columns: 1fr;
  }
}
</style>
